<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<block slot="content">防汛资源</block>
		</cu-custom>
		<view class="dataMag" :style="{ height: appHeight + 'px' }">
			<template v-if="appHeight > 0">
				<mapView @mapDone="mapDone" ref="mapView" titlePos="center" :isShowWaterXi="false"> </mapView>
			</template>
			<view class="top-tright" @click="toTotal">
				<i class="iconfont icon-a-tongji1" style="font-size: 24rpx"></i>
				<text class="ml10">资源统计</text>
			</view>
			<view class="left-menus">
				<view
					v-for="item in dataList"
					:class="{ itemAc: item.isChecked }"
					:key="item.value"
					class="menus-sin"
					@click="changeMenus(item)"
				>
					<view class="iconbox-class" :class="item.className">
						<i :class="`iconfont ${item.icon}`" style="font-size: 24rpx"></i>
					</view>
					<text class="ml10 nop">
						{{ item.name }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control'
	export default {
		name: 'dataMag',
		components: {},
		data() {
			return {
				appHeight: 0,
				// { isChecked: false, name: '应急统计', value: 'total' },

				dataList: [
					// { isChecked: false, name: '应急物资', value: 'yjwz' },
					// { isChecked: false, name: '企业台账', value: 'qytz' },
					// { isChecked: false, name: '避难场所', value: 'bns' },
					{ isChecked: false, icon: 'icon-a-anzhidian1', className: 'anzhidain', name: '安置点', value: 'azd' },
					{ isChecked: false, icon: 'icon-a-weixianqu1', className: 'weixianqu', name: '危险区', value: 'wxq' },
					{ isChecked: false, icon: 'icon-a-luxian1', className: 'luxian', name: '转移路线', value: 'zylx' }
				]
			}
		},
		onLoad(options) {},

		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			uni.$on('flyMapBaseData', (item) => {
				this.flyMap(item)
			})
		},
		beforeDestroy() {
			uni.$off('flyMapBaseData')
		},
		methods: {
			flyMap({ lat, lon, zoom = 6 }) {
				console.info(`lat, lon, zoom:`, lat, lon, zoom)
				this.map.flyTo([lat, lon], zoom)
			},
			// 地图实例返回
			mapDone(map) {
				this.map = map
				// 初始化图层组
				this.mapGroups = L.baseLayerGroup().addTo(map)

				this.layerGroups = {
					// tyGroups: L.baseLayerGroup().addTo(this.mapGroups),
					// radarGroups: L.baseLayerGroup().addTo(this.mapGroups),
					// cloudGroups: L. baseLayerGroup().addTo(this.mapGroups)
				}
				this.dataList.forEach((el) => {
					this.layerGroups[el.value] = L.baseLayerGroup().addTo(this.mapGroups)
				})

				// this.map.on('moveend', (e) => {
				// 	console.info(`map.getBounds();:`, map.getBounds())
				// })
			},
			toTotal() {
				this.$toUrl('/pages/emergency/count')
			},
			changeMenus(item) {
				item.isChecked = !item.isChecked
				switch (item.value) {
					case 'total':
						this.$toUrl('/pages/emergency/count')
						break
					case 'yjwz':
						this.init_yjwz(item.isChecked)
						break
					case 'qytz':
						this.init_qytz(item.isChecked)
						break
					case 'bns':
						this.init_bns(item.isChecked)
						break
					case 'azd':
						this.init_azd(item.isChecked)
						break
					case 'wxq':
						this.init_wxq(item.isChecked)
						break
					case 'zylx':
						this.init_zylx(item.isChecked)
						break
					case 'zjsj':
						this.init_zjsj(item.isChecked)
						break
					default:
						break
				}
			},
			async init_yjwz(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.yjwz
						} else {
							resp = await controlApi.goodsMaterials({
								projectId: '3bc0fb05339a46d7966a7abac9fc3516'
							})
						}
						const { data } = resp
						const list = data.data
						list.forEach((material) => {
							material.materialDetails.forEach((item) => {
								L.marker([item.properties.latitude, item.properties.longitude], {
									icon: L.divIcon({
										className: 'map-town-legend-style',
										iconSize: [25, 25],
										html: `<img src="/static/image/map/${icon}.png" style='width:25px' alt="" srcset=""/>`
									})
								}).on('click', (e) => {
									this.dzdShow = true
									this.dzdHtml = tip
								})
							})
						})

						console.info(`resp:`, resp)
					} else {
						this.layerGroups.yjwz.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			async init_qytz(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.yjwz
						} else {
							let getUserInfoData = uni.getStorageSync('getUserInfoData')
							let areaCode = getUserInfoData.dept.code
							let areaLevel = getUserInfoData.dept.areaLevel
							let obj = {
								0: 'CITY',
								1: 'COUNTY',
								2: 'TOWNSHIP'
							}
							let params = {
								areaId: '350400000000',
								type: 'CITY', // areaCode == '350400000000' ? 'CITY' : 'COUNTY',
								projectId: '3bc0fb05339a46d7966a7abac9fc3516'
							}
							resp = await controlApi.enterpriseLedger(params)
						}
						const { data } = resp
						const list = data.data
						let makerLayer = L.featureGroup.collision({ margin: 2 }).addTo(this.layerGroups.qytz)
						// var makerLayer = L.markerClusterGroup().addTo(this.layerGroups.qytz)
						list.forEach((item) => {
							L.marker([item.lat, item.lot], {
								icon: L.divIcon({
									className: 'fz-typelist-style',
									iconSize: [35, 35],
									html: `
	                                   <div class='circle-boxEnter'>
	                                       <div  class='df-box org-color'>
						            <i class='iconfont icon-a-zaibeiyingyongtaizhang1'></i>
						                </div>
	                                       </div>
						            `
								})
							})
								.on('click', (e) => {
									// this.dzdShow = true
									// <span>  ${properties.NAME}</span>
									// this.dzdHtml = tip
								})
								.addTo(makerLayer)
						})

						console.info(`resp:`, resp)
					} else {
						this.layerGroups.yjwz.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			async init_bns(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.bns
						} else {
							let getUserInfoData = uni.getStorageSync('getUserInfoData')
							let areaCode = getUserInfoData.dept.code
							let areaLevel = getUserInfoData.dept.areaLevel
							let obj = {
								0: 'CITY',
								1: 'COUNTY',
								2: 'TOWNSHIP'
							}
							let params = {
								areaId: areaCode, // '350400000000',
								type: obj[areaLevel], //'CITY', // areaCode == '350400000000' ? 'CITY' : 'COUNTY',
								projectId: '3bc0fb05339a46d7966a7abac9fc3516'
							}
							resp = await controlApi.takeRefuge(params)
						}
						const { data } = resp
						// const list = data.data
						let makerLayer = L.featureGroup.collision({ margin: 20 }).addTo(this.layerGroups.bns)
						data.forEach((place) => {
							const placeDetails = place.placeDetails
							placeDetails.forEach((item) => {
								if (item.lat & item.lot) {
									// console.info(`item:`, item)
									// <span>  ${item.emergName}</span>

									L.marker([item.lot, item.lat], {
										icon: L.divIcon({
											className: 'fz-typelist-style',
											iconSize: [35, 35],
											html: `
	                                   <div class='circle-boxEnter'>
	                                       <div  class='df-box blue-color'>
						            <i class='iconfont icon-a-binanchangsuo1'></i>
						                </div>
	                                       </div>

						            `
										})
									})
										.on('click', (e) => {
											// this.dzdShow = true
											// this.dzdHtml = tip
										})
										.addTo(makerLayer)
								}
							})
						})

						console.info(`resp:`, resp)
					} else {
						this.layerGroups.bns.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			async init_azd(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.azd
						} else {
							let params = {
								// layer: 'sanming:安置点',
								service: 'WFS',
								request: 'GetFeature',
								version: '1.0.0',
								outputFormat: 'application/json',
								maxFeatures: '10000',
								typeName: 'sanming:安置点'
							}
							// layer = L.tileLayer[c.type](c.url, c.options)
							resp = await controlApi.azdJson(params)
						}
						let { features } = resp
						let makerLayer = L.featureGroup.collision({ margin: 20 }).addTo(this.layerGroups.azd)
						features.forEach((sinFnu) => {
							const { geometry, properties } = sinFnu
							let item = geometry.coordinates
							let lat = item[1]
							let lon = item[0]
							L.marker([lat, lon], {
								icon: L.divIcon({
									className: 'fz-typelist-style',
									iconSize: [35, 35],
									html: `
	                                   <div class='circle-boxEnter'>
	                                       <div  class='df-box ger-color'>
						            <i class='iconfont icon-a-anzhidian1'></i>
						                </div>
	                                   <span>  ${properties.NAME}</span>
	                                       </div>

						            `
								})
							})
								.on('click', (e) => {
									// this.dzdShow = true
									// this.dzdHtml = tip
								})
								.addTo(makerLayer)
						})

						console.info(`resp:`, resp)
					} else {
						this.layerGroups.azd.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			async init_wxq(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.azd
						} else {
							let params = {
								// layer: 'sanming:安置点',
								service: 'WFS',
								request: 'GetFeature',
								version: '1.0.0',
								outputFormat: 'application/json',
								maxFeatures: '10000',
								typeName: 'sanming:危险区'
							}
							// layer = L.tileLayer[c.type](c.url, c.options)
							resp = await controlApi.azdJson(params)
						}

						L.geoJSON(resp, {
							style: {
								color: '#ff0000',
								weight: 2
							}
						}).addTo(this.layerGroups.wxq)
						console.info(`resp:`, resp)
					} else {
						this.layerGroups.wxq.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			async init_zylx(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.zylx
						} else {
							let params = {
								// layer: 'sanming:安置点',
								service: 'WFS',
								request: 'GetFeature',
								version: '1.0.0',
								outputFormat: 'application/json',
								maxFeatures: '10000',
								typeName: 'sanming:三明转移路线'
							}
							// layer = L.tileLayer[c.type](c.url, c.options)
							resp = await controlApi.azdJson(params)
						}

						L.geoJSON(resp, {
							style: {
								color: '#B8E986',
								weight: 3
							}
						}).addTo(this.layerGroups.zylx)
						console.info(`resp:`, resp)
					} else {
						this.layerGroups.zylx.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			async init_zjsj(isActive, useCacheData = false) {
				try {
					if (isActive) {
						let resp = null
						if (useCacheData) {
							resp = this.cacheObj.zjsj
						} else {
							let params = {
								projectId: '3bc0fb05339a46d7966a7abac9fc3516', //  ---项目id
								topoId: 'WPEmerManagementExperts:5ff7eb0f-e6cc-4890-aeae-3e68539aa652' // --
							}
							resp = await controlApi.zjsjJson(params)
						}
						let { data } = resp
						const list = data.data
						let makerLayer = L.featureGroup.collision({ margin: 20 }).addTo(this.layerGroups.azd)
						list.forEach((sinFnu) => {
							const { geometry, properties } = sinFnu
							let item = geometry.coordinates
							let lat = item[1]
							let lon = item[0]
							L.marker([lat, lon], {
								icon: L.divIcon({
									className: 'fz-typelist-style',
									iconSize: [35, 35],
									html: `
	                                   <div class='circle-boxEnter'>
	                                       <div  class='df-box per-color'>
						            <i class='iconfont icon-a-anzhidian1'></i>
						                </div>
	                                   <span>  ${properties.NAME}</span>
	                                       </div>

						            `
								})
							})
								.on('click', (e) => {
									// this.dzdShow = true
									// this.dzdHtml = tip
								})
								.addTo(makerLayer)
						})
					} else {
						this.layerGroups.zjsj.clearLayers()
						this.$hideLoading()
					}
				} catch (error) {
					console.error(error)
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.dataMag {
		width: 100%;
		position: relative;
		.top-tright {
			position: absolute;
			z-index: 700;
			left: 20rpx;
			top: 150rpx;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(21.5rpx);
			padding: 10rpx 20rpx;
			color: #607589;
		}
		.left-menus {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 999;
			background: #fff;
			width: 750rpx;
			display: flex;
			justify-content: space-around;
			height: 100rpx;
			align-items: center;
			.menus-sin {
				flex: 1;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 144rpx;
				background: #fff;
				font-size: 26rpx;
				color: #666;
				font-weight: 550;
				filter: grayscale(100%);
			}
			.itemAc {
				// background: #2695fe;
				// color: #fff;
				color: #0085ff;
				filter: grayscale(0%);
			}
			.iconfont {
				font-size: 34rpx !important;
			}
			.luxian {
				.iconfont {
					color: #b8e986;
				}
			}
			.anzhidain {
				.iconfont {
					color: #52af9f;
				}
			}
			.weixianqu {
				.iconfont {
					color: #ff0000;
				}
			}
		}
	}
	/deep/.circle-boxEnter {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.df-box {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			box-shadow: 0px 4rpx 30rpx 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(21.5rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
		.ger-color {
			background: linear-gradient(180deg, #fff 0%, #d8fff8 100%);
			color: #52af9f;
			border: 1rpx solid #52af9f;
		}
		.blue-color {
			background: linear-gradient(180deg, #fff 0%, #ecf6ff 100%);
			color: #0085ff;
			border: 1rpx solid #0085ff;
		}
		.org-color {
			background: linear-gradient(180deg, #fff 0%, #fff6ec 100%);
			color: #ff8a00;
			border: 1rpx solid #ff8a00;
		}

		.red-color {
			background: #ff0000;
		}
		span {
			color: white;
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			white-space: nowrap;
		}
	}
</style>
